<!--跳转 报警信息汇总-编辑 页面-->


<div id="content">

  <app-edit-alarm-summary *ngIf="editFlag" [selectEditData]="selectEditData" [option]="option" [parentCom]="'报警信息汇总'"
    (result)="cancel($event)"></app-edit-alarm-summary>
  <div *ngIf="alarmList && !editFlag">
    <div style="width: 100%; min-height: 35px">
      <div style=" width: 60%; float: left;">
        <!-- <SearchBar [placeholder]="'输入关键字搜索'" [setFocus]="autoFocus" [(ngModel)]="searchValue" (onCancel)="cancel()"
          (ngModelChange)="search()">
        </SearchBar> -->
        <div class="item-input-inset" style="padding: 0">
          <label class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <ion-input type="search" placeholder="输入关键字搜索" [(ngModel)]="searchValue" (ionChange)="search()"
              (ionFocus)=" this.inputFocus = true; " (ionBlur)=" this.inputFocus = false; "></ion-input>
          </label>
          <ion-button *ngIf="inputFocus" class="button cancel-btn" size="small" fill="clear" (click)="cancel()">
            取消
          </ion-button>
        </div>
      </div>
      <div Button [size]="'small'" (click)="getAlarmList()" [type]="'primary'"
        style="width: 15%; margin-left: 5%; float: left;">刷新
      </div>
    </div>
    <!-- <WhiteSpace [size]="'lg'"></WhiteSpace> -->
    <ActivityIndicator [toast]="true" [text]="'加载中...'" [animating]="loading"></ActivityIndicator>
    <!-- <table style="width: 100%; border-collapse:separate; border-spacing:0px 15px; ">
      <thead>
        <tr>
          <th>#</th>
          <th>设备名称</th>
          <th>报警数量（次）</th>
          <th>报警总时长（s）</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of alarmJson">
          <td>{{alarmJson.indexOf(data) + 1}}</td>
          <td>{{data.devicename}}</td>
          <td>{{data.sum}}</td>
          <td>{{data.timesum}}</td>
          <td>
            <a (click)="editOrPreview(data.deviceid, 'preview')"><i nz-icon nzType="zoom-in"
                nzTheme="outline"></i>预览</a>
          </td>
        </tr>
      </tbody>
    </table> -->

    <WingBlank style="margin: 0">
      <Card *ngFor="let data of alarmJson" style="margin: 10px 0px;">
        <CardHeader [title]="data.devicename" class="title" [extra]="extra">
        </CardHeader>
        <ng-template #extra>
          <!-- <a (click)="editOrPreview(data.deviceid, 'preview')"><i class="icon ion-pie-graph"></i>预览</a> -->
        </ng-template>
        <CardBody style="padding: 0px 0px 5px; border: 1px solid gold"
          (click)="editOrPreview(data.deviceid, 'preview')">
          <div id="contentCard">
            <!-- <ul style="padding: 10px;">
            <li>设备名称</li>
            <li>{{data.devicename}}</li>
            <li>报警数量（次）</li>
            <li>{{data.sum}}</li>
            <li>报警总时长（s）</li>
            <li>{{data.timesum}}</li>
          </ul> -->

            <table
              style="width: 100%; border-collapse:separate; border-spacing:0px 15px; table-layout: fixed; border: 0px; padding: 0px 10px">
              <tbody>
                <tr>
                  <td>设备名称</td>
                  <td>{{ data.devicename }}</td>
                </tr>
                <tr>
                  <td>报警数量（次）</td>
                  <td>{{ data.sum }}</td>
                </tr>
                <tr>
                  <td>报警总时长（s）</td>
                  <td>{{data.timesum}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </CardBody>
      </Card>
    </WingBlank>
  </div>
</div>